<!-- 联系表单模块 -->
<section id="<?php echo $data['type']; ?>" class="py-16 bg-gradient-to-br from-primary/5 to-secondary/5">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <span class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4"><?= $data['content']['sectionBadge'] ?></span>
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4"><?= $data['content']['sectionTitle'] ?></h2>
      <p class="text-dark/70"><?= $data['content']['sectionSubtitle'] ?></p>
    </div>
    
    <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
      <!-- 预约演示表单 -->
      <div class="p-8">
        <form>
          <?php foreach ($data['content']['form']['fields'] as $field) { ?>
            <?php if ($field['type'] == 'checkbox') { ?>
              <div class="mb-6">
                <label class="block text-dark/80 mb-3"><?php echo $field['label']; ?><?php if (isset($field['required']) && $field['required']) { ?> <span class="text-red-500">*</span><?php } ?></label>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <?php foreach ($field['options'] as $option) { ?>
                    <label class="flex items-center space-x-2 cursor-pointer">
                      <input type="checkbox" name="<?php echo $field['name']; ?>[]" value="<?php echo $option['value']; ?>" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary/50">
                      <span class="text-dark/70"><?php echo $option['label']; ?></span>
                    </label>
                  <?php } ?>
                </div>
              </div>
            <?php } elseif ($field['type'] == 'select') { ?>
              <div class="mb-6">
                <label for="<?php echo $field['name']; ?>" class="block text-dark/80 mb-2"><?php echo $field['label']; ?><?php if (isset($field['required']) && $field['required']) { ?> <span class="text-red-500">*</span><?php } ?></label>
                <select id="<?php echo $field['name']; ?>" name="<?php echo $field['name']; ?>" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"<?php if (isset($field['required']) && $field['required']) { ?> required<?php } ?>>
                  <option value="">请选择...</option>
                  <?php foreach ($field['options'] as $option) { ?>
                    <option value="<?php echo $option['value']; ?>"><?php echo $option['label']; ?></option>
                  <?php } ?>
                </select>
              </div>
            <?php } elseif ($field['type'] == 'textarea') { ?>
              <div class="mb-6">
                <label for="<?php echo $field['name']; ?>" class="block text-dark/80 mb-2"><?php echo $field['label']; ?><?php if (isset($field['required']) && $field['required']) { ?> <span class="text-red-500">*</span><?php } ?></label>
                <textarea id="<?php echo $field['name']; ?>" name="<?php echo $field['name']; ?>" rows="<?php echo $field['rows']; ?>" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="<?php echo $field['placeholder']; ?>"<?php if (isset($field['required']) && $field['required']) { ?> required<?php } ?>></textarea>
              </div>
            <?php } else { ?>
              <div class="mb-6">
                <label for="<?php echo $field['name']; ?>" class="block text-dark/80 mb-2"><?php echo $field['label']; ?><?php if (isset($field['required']) && $field['required']) { ?> <span class="text-red-500">*</span><?php } ?></label>
                <input type="<?php echo $field['type']; ?>" id="<?php echo $field['name']; ?>" name="<?php echo $field['name']; ?>" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="<?php echo $field['placeholder']; ?>"<?php if (isset($field['required']) && $field['required']) { ?> required<?php } ?>>
              </div>
            <?php } ?>
          <?php } ?>
          
          <!-- 期望联系时间 -->
          <?php if (isset($data['content']['form']['preferredContactTime']) && $data['content']['form']['preferredContactTime']['enabled']) { ?>
            <div class="mb-6">
              <label class="block text-dark/80 mb-3"><?php echo $data['content']['form']['preferredContactTime']['label']; ?></label>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                <?php foreach ($data['content']['form']['preferredContactTime']['options'] as $option) { ?>
                  <label class="flex items-center space-x-2 cursor-pointer">
                    <input type="radio" name="preferredContactTime" value="<?php echo $option['value']; ?>" class="h-4 w-4 text-primary border-gray-300 focus:ring-primary/50">
                    <span class="text-dark/70"><?php echo $option['label']; ?></span>
                  </label>
                <?php } ?>
              </div>
            </div>
          <?php } ?>
          
          <!-- 隐私协议 -->
          <?php if (isset($data['content']['form']['agreement'])) { ?>
            <div class="mb-6">
              <label class="flex items-start space-x-2 cursor-pointer">
                <input type="checkbox" name="agreement" class="h-4 w-4 mt-1 text-primary border-gray-300 rounded focus:ring-primary/50"<?php if ($data['content']['form']['agreement']['required']) { ?> required<?php } ?>>
                <span class="text-dark/70 text-sm"><?php echo $data['content']['form']['agreement']['text']; ?></span>
              </label>
            </div>
          <?php } ?>
          
          <!-- 提交按钮 -->
          <button type="submit" class="w-full px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition duration-300 font-medium flex items-center justify-center">
            <?php echo $data['content']['form']['submitButton']['text']; ?>
            <?php if (isset($data['content']['form']['submitButton']['icon'])) { ?>
              <i class="fa fa-<?php echo $data['content']['form']['submitButton']['icon']; ?> ml-2"></i>
            <?php } ?>
          </button>
        </form>
      </div>
      
      <!-- 后续信息 -->
      <?php if (isset($data['content']['followUpInfo'])) { ?>
        <div class="bg-gray-50 p-6">
          <h4 class="font-bold mb-4 text-dark/80"><?php echo $data['content']['followUpInfo']['text']; ?></h4>
          <ul class="space-y-2">
            <?php foreach ($data['content']['followUpInfo']['items'] as $item) { ?>
              <li class="flex items-start space-x-3">
                <i class="fa fa-check text-green-500 mt-1"></i>
                <span class="text-dark/70"><?php echo $item; ?></span>
              </li>
            <?php } ?>
          </ul>
        </div>
      <?php } ?>
    </div>
    
    <!-- 成功消息 (默认隐藏) -->
    <div id="form-success" class="hidden max-w-3xl mx-auto mt-8 bg-green-50 border border-green-200 rounded-lg p-6 text-center">
      <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-check text-green-500 text-2xl"></i>
      </div>
      <h3 class="text-xl font-bold text-green-800 mb-2">提交成功！</h3>
      <p class="text-green-700"><?php echo $data['content']['form']['successMessage']; ?></p>
    </div>
  </div>
</section>

<script>
  // 简单的表单提交处理
  document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 模拟表单提交
    setTimeout(function() {
      // 隐藏表单
      document.querySelector('form').closest('.p-8').classList.add('hidden');
      // 显示成功消息
      document.getElementById('form-success').classList.remove('hidden');
    }, 1000);
  });
</script>